<template>
  <div class="common-card h-full w-full">
    <component :is="_Card" v-bind="props">
      <slot></slot>
    </component>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import Theme1 from "./_Theme1/index.vue";
import Theme2 from "./_Theme2/index.vue";
import Theme3 from "./_Theme3/index.vue";

const props = defineProps<{
  // 标题
  title?:string,
  // 是否翻转
  reverse?:boolean,
  // 主题
  theme?:string
}>();

const themeConfig:any = {
  "theme1": Theme1,
  "theme2": Theme2,
  "theme3": Theme3
};

const _Card = computed(() => {
  return themeConfig[props.theme || "theme1"];
});
</script>
